<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration: none
        }
        ul {
            list-style: none
        }
        #top {
            width: 100%;
            height: 110px;
        }
        #topimg {
            width: 100%;
            height: 170px;
            margin-top: -150px;
        }
        #topfirst {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }
        #p11 {
            float: right;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            margin-top: -10px;
            position: relative;
            left: -50px;
        }
        #p22 {
            float: right;
            font-family: Arial, Helvetica, sans-serif;
            margin-top: 10px;
            position: relative;
            left: -50px;
        }
        #topfirst img {
            width: 60px;
            height: 60px;
            position: relative;
            left: 100px;
            /* margin: 0 auto; */
        }
        #topsecond {
            width: 100%;
            height: 30px;
            margin: 0 auto;
            background-color: rgb(70, 68, 68);
            position: relative;
            z-index: 11;
            top: 15px;
        }
        #topsecond ul {
            width: 1000px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 10;
        }
        #topsecond ul li {
            width: 100px;
            height: 30px;
            line-height: 30px;
            float: left;
            text-align: center;
        }
        #topsecond ul li a {
            color: rgb(245, 241, 241);
        }
        #topsecond ul li a:hover {
            color: crimson;
        }
        #img01,
        #img02,
        #img03,
        #img04 {
            width: 100%;
            height: 500px;
            margin: 0 auto;
        }
        .body {
            width: 100%;
            height: 350px;
        }
        .body h2 {
            text-align: center
        }
        .bodycenter {
            width: 100%;
            height: 400px;
            margin: 0 auto;

        }
        .bodycenter ul {
            width: 100%;
            height: 400px;
            margin-top: 20px;
        }
        .bodycenter ul li {
            width: 23%;
            height: 300px;
            float: left;
            margin-left: 10px;
        }
        .bodycenter ul li img {
            width: 100%;
            height: 230px;
            border-radius: 20px;
        }
        .body1 {
            width: 100%;
            height: 400px;
        }
        .body1 h2 {
            text-align: center
        }
        #back img {
            width: 50px;
            height: 50px;
            position: fixed;
            bottom: 70px;
            right: 70px;
        }
        #map {
            width: 100%;
            height: 500px;
        }
        #container {
            width: 1100px;
            height: 400px;
            margin: 0px auto;
        }
        #p000 {
            width: 100%;
            height: 250px;
            margin-top: 400px;
            /* background-color: #f0f; */
        }
        #p111 {
            font-size: 30px;
            color: red;
            text-align: center;
            position: relative;
            top: 100px;
        }
        #p222 {
            font-size: 30px;
            color: black;
            text-align: center;
            position: relative;
            top: 50px;
        }
        .div1 {
            width: 100%;
            height: 300px;
            background: pink;
            padding: 0;
        }
        #div1 {
            width: 100%;
            height: 300px;
            background: #ccc
        }
        #div2 {
            width: 100%;
            height: 200px;
            background: #777
        }
        p {
            position: relative;
            top: 48%;
            text-align: center
        }
        span {
            font-size: 20px;
            position: relative;
            left: 35%;
        }
        .body ul #li1{
            width: 100%;
            height: 70px;
            text-align: center;
        }
        .footer{
            width: 100%;
            height: 300px;
            background-color: yellow;
            margin-top: 50px;
        }
    </style>
    <script>
        //1.window.onscroll事件中编码
        window.onscroll = function () {
            //2.获取当前滚动距离document.documentElement.scrollTop
            var top = document.documentElement.scrollTop
            //3.1判断滚动距离 >= 168, 修改nav定位样式->fixed
            if (top >= 70) {
                document.getElementById('topsecond').style.position = 'fixed'
                document.getElementById('topsecond').style.top = 0
                document.getElementById('topsecond').style.left = 0
            } else {
                document.getElementById('topsecond').style.position = 'static'
                document.getElementById('topsecond').style = 'static'
            }
            //3.2,修改nav定位样式恢复正常方式
        }
        function pageScroll() {
            window.scrollBy(0, -100);
            scrolldelay = setTimeout('pageScroll()', 100);
            var sTop = document.documentElement.scrollTop + document.body.scrollTop;
            if (sTop == 0) clearTimeout(scrolldelay);
        }
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=skwNO9DzKL8dkEn9ZXMWjxkk">
        //v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"
    </script>
</head>

<body>
    <div id="top">
        <div id="topfirst">
            <img src="images/logo1.png">

            <p id="p22">总有一款适合你</p>
            <p id="p11">come here</p>
        </div>
        <div id="topsecond">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="person.html">个人中心</a></li>
                <li><a href="">优惠活动</a></li>
                <li><a href="">立即购买</a></li>
                <li><a href="">购物车</a></li>
                <li><a href="">新闻资讯</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="index.html#mymap">地图</a></li>
                <li><a href="">登陆注册</a></li>
            </ul>
        </div>
        <img src="images/c356.jpg" id="topimg">
    </div>
    <div class="content">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner container" role="listbox">
                <div class="item active ">
                    <img src="images/sweet4.jpg" alt="" id="img01">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="images/sweet5.jpg" alt="" id="img02">
                    <div class="carousel-caption">

                    </div>
                </div>
                <div class="item">
                    <img src="images/sweet2.jpg" alt="" id="img02">
                    <div class="carousel-caption">

                    </div>
                </div>
                ...
            </div>
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="container">
            <div class="body">
                <h2>今日上新</h2>
                <div class="bodycenter">
                    <ul>
                        <li><img src="images/doub.jpg"><span><a href="">双皮奶</a></span></li>
                        <li><img src="images/egg.jpg"><span><a href="">鸡蛋布丁</a></span></li>
                        <li><img src="images/ice.jpg"><span><a href="">抹茶冰淇淋</a></span></li>
                        <li><img src="images/sweet3.jpg"><span><a href="">草莓蛋糕</a></span></li>
                        <li id="li1"><h2>店长推荐</h2></li>
                        <li><img src="images/doub.jpg"><span><a href="">双皮奶</a></span></li>
                        <li><img src="images/egg.jpg"><span><a href="">鸡蛋布丁</a></span></li>
                        <li><img src="images/ice.jpg"><span><a href="">抹茶冰淇淋</a></span></li>
                        <li><img src="images/sweet3.jpg"><span><a href="">草莓蛋糕</a></span></li>
                        <li id="li1"><h2>往期热销</h2></li>
                        <li><img src="images/doub.jpg"><span><a href="">双皮奶</a></span></li>
                        <li><img src="images/egg.jpg"><span><a href="">鸡蛋布丁</a></span></li>
                        <li><img src="images/ice.jpg"><span><a href="">抹茶冰淇淋</a></span></li>
                        <li><img src="images/sweet3.jpg"><span><a href="">草莓蛋糕</a></span></li>
                    </ul>
                </div>
            </div>
            
        <div id="map">
                <a name="mymap">
            <div id="container">
                
                    <script type="text/javascript">
                        var map = new BMap.Map("container");
                        // 创建地图实例  
                        var point = new BMap.Point(120.62, 31.32);
                        // 创建点坐标  
                        map.centerAndZoom(point, 15);
                        // 初始化地图，设置中心点坐标和地图级别  
                        var marker = new BMap.Marker(point);        // 创建标注    
                        map.addOverlay(marker);       
                    </script>
            </div>
           
        </div>
    </a>
    </div>

    <div class="container">
    <div id="p000">
        <p id="p222">OUR DESSERT </p>
        <p id="p111">我们的甜品</p>
    </div>
    
        <div class="row">
            <div class="col-md-6 col-sm-12" style="padding: 0;"><img src="images/index1.jpg"
                    style="width: 100%;height:300px"></div>
            <div class="col-md-3 col-sm-12" style="padding: 0;">
                <div class="div1">
                    <p>采购新鲜优质水果，鲜榨果汁，加入为数不多秘制原料，口感更佳。</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-12" style="padding: 0;"><img src="images/index3.jpg"
                    style="width: 100%;height:300px"></div>
        </div>
        <div class="row">
            <div class="col-md-3 col-sm-12" style="padding: 0;">
                <div class="div1">
                    <p>采购新鲜原材料，加入为数不多秘制原料，口感更佳</p>
                </div>
                <img src="images/index7.jpg" style="width: 100%;height:300px;">
            </div>
            <div class="col-md-6 col-sm-12" style="padding: 0;">
                <img src="images/index5.jpg" style="width: 100%;height: 400px;">
                <div id="div2">
                    <p>采购新鲜原材料，加入为数不多秘制原料，口感更佳</p>
                </div>
            </div>
            <div class="col-md-3 col-sm-12" style="padding: 0;">
                <div class="div1">
                    <p>采购新鲜原材料，加入为数不多秘制原料，口感更佳</p>
                </div>
                <div id="div1">
                    <p><a href="storys.html">进来留下你的故事！</a></p>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"></div>
</div>
    <a onclick="pageScroll()">
        <div id="back"><img src="images/back.png" title="回到顶部"></div>
    </a>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script>
        //设置轮播的时间间隔
        $('#carousel-example-generic').carousel({ interval: 3000 })
    </script>
</body>

</html>